<template>
  <div class="detail_info">
    <h1>{{ specs.product_name }}</h1>

    <div style="" class="clearfix">
      <div>
        <span>蜜度</span>
        <el-rate :value="specs.product_sweetness" void-icon-class="icon-rate-face-off" disabled></el-rate>
      </div>
      <div>
        <span>蜜度</span>
        <el-rate :value="specs.product_cheese" void-icon-class="icon-rate-face-off" disabled>
        </el-rate>
      </div>
      <div style="font-size: 14px; color: #606266;" @click="addxin">
        <i :class="xin ? 'el-icon-star-on' : 'el-icon-star-off'"
          style="margin-right: 4px; font-size: 22px; color: #f7ba2a;"></i>
        收藏宝贝（{{ this.collect.length }}人气）
      </div>
    </div>
    <!-- 副标题 -->
    <div class="detail_info_dd">
      <p style="font-size: 10px;">{{ specs.product_describe }}</p>
    </div>
    <!--详情 -->
    <div class="xq">
      <el-row>
        <el-col :span="12">
          <el-image style="width: 210px; height: 139px" :src="specs.product_size_img" fit="fit"></el-image></el-col>
        <el-col :span="12">
          <div class="size_detail">
            <div class="size_sizes"><i><img src="@/assets/重量.png" alt=""></i><span>{{ size[activeSize].data_weight
            }}</span><span>{{ size[activeSize].data_pound }}</span></div>
            <div class="size_covers"><i><img src="@/assets/餐具.png" alt=""></i><span>+{{ size[activeSize].defaultware
            }}</span></div>
            <div class="size_numbers"><i><img src="@/assets/人数.png" alt=""></i><span>{{ size[activeSize].defaulteat
            }}</span></div>
            <div class="size_times"><i><img src="@/assets/217时间-线性.png" alt=""></i>今日最早{{ new Date().getHours() + 2
            }}:00配送</div>
            <div class="size_price"><i><img src="@/assets/钱钱.png" alt=""></i>￥{{ 1 + specs.out_price * (activeSize + 1)
            }}/<span style="font-size: 13px;">{{ size[activeSize].SpecsSize }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 选项卡 -->
    <div class="select_box">

      <ul class="sizelist">
        <li v-for="(size, index) in sizelist" :class="{ 'default': activeSize === index }"
          v-show="size.product_specs !== ''" :key="index">
          <a @click="SpecsSize(index, (size.product_specs + specs.specs_name))">{{ size.product_specs +
            specs.specs_name }}</a>
        </li>
      </ul>
    </div>
    <!-- 按钮 -->
    <div class="btn">
      <el-row>
        <el-col :span="12"><button class="add_bug" @click="add()">加入购物车</button></el-col>
        <el-col :span="12"><button class="buy_now " @click="buy">立即购买</button></el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
import { showProductCollect, AddCollect, deletsCollect } from '@/api/index'

export default {
  name: 'KodaiProductDetails',
  props: {
    specs: {
      type: Object,
      // 这里代表是从父传来的是对象  默认值必须是一个函数
      default () {
        return {
        }
      }
    },
    product_id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      size: [
        {
          data_weight: '约600磅',
          data_pound: '(>1.3克)',
          defaultware: '4套餐具',
          defaulteat: "适合2-4人食用",
          SpecsSize: '14厘米',
        }, {
          data_weight: '约800磅',
          data_pound: '(>1.7克)',
          defaultware: '6套餐具',
          defaulteat: "适合3-6人食用",
          SpecsSize: '14厘米',
        },
        {
          data_weight: '约1300磅',
          data_pound: '(>2.8克)',
          defaultware: '12套餐具',
          defaulteat: "适合7-12人食用",
          SpecsSize: '14厘米',

        }, {
          data_weight: '约2000磅',
          data_pound: '(>4.4克)',
          defaultware: '18套餐具',
          defaulteat: "适合13-18人食用",
          SpecsSize: '14厘米',

        }, {
          data_weight: '约2700磅',
          data_pound: '(>5.9克)',
          defaultware: '18套餐具',
          defaulteat: "适合20~30人食用",
          SpecsSize: '14厘米',

        }
      ],
      activeSize: 0,
      collect: [],
      xin: false,
      userC: []
    };
  },
  computed: {
    sizelist () {
      return [
        { product_specs: this.specs.product_specs1 },
        { product_specs: this.specs.product_specs2 },
        { product_specs: this.specs.product_specs3 },
        { product_specs: this.specs.product_specs4 }
      ]
    }
  },

  beforeUpdate () {
    if (this.activeSize == 0) {
      this.SpecsSize(0, (this.specs.product_specs1 + this.specs.specs_name))
    }
    showProductCollect(this.product_id).then(res => {
      this.collect = res.data.data[0]
      this.userC = res.data.data[1]
      this.xin = (this.userC.length != 0)
    })
  },

  methods: {
    SpecsSize (index, size) {
      this.activeSize = index
      this.size[this.activeSize].SpecsSize = size
    },
    add () {
      this.size[this.activeSize].product_price = (this.specs.out_price * (this.activeSize + 1))
      this.$emit('add', this.size[this.activeSize])
    },
    buy () {
      this.$emit('buy', this.size[this.activeSize], (this.specs.out_price * (this.activeSize + 1)))
    },
    addxin () {
      // 判断是否选中
      if (!this.xin) {
        // 添加接口
        AddCollect({ product_id: this.product_id, collect_id: this.$getDateNow() }).then(res => {
          if (res.data.code === 200) {
            this.showMessage.call(this, 'success', "收藏成功！");
            this.xin = true
          } else {
            this.showMessage.call(this, 'error', "收藏失败！");
            this.xin = false
          }
        })
      } else {
        // 删除选中
        deletsCollect(this.userC[0].collect_id).then(res => {
          console.log(res);
          if (res.data.code === 200) {
            this.xin = false
          } else {
            this.xin = true
          }
        })
      }

    }
  },
};
</script>

<style lang="scss" scoped>
.xq {
  margin-top: 20px;

  .size_price {
    font-weight: bold;
    font-size: 20px;
  }
}

.btn {
  margin-left: 35px;

  .buy_now,
  .add_bug {
    display: inline-block;
    width: 170px;
    height: 40px;
    text-align: center;
    font-size: 15px;
  }
}

.detail_info {
  width: 420px;
  border: 1px solid #e7e7e7;
  padding: 30px 0;
  background-color: #ffffff;
  margin-left: 96px;
  color: #3C2314;
  text-align: left;
}

.detail_info h1 {
  font-size: 28px;
  line-height: 28px;
  margin: 0 26px;
  font-weight: 400;
}

.clearfix {
  margin: 40px 26px 0;

}

.clearfix div {
  display: flex;
  align-items: center;
}

.clearfix span {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 5px;
}

.detail_info_dd {

  font-size: 12px;
  margin: 0px 26px 0;

  p {
    width: 368px;

    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
}

.size_detail {
  margin-left: 20px;
  font-size: 14px;
  width: 178px;

}

.size_detail div {
  margin-bottom: 4px;
}

.size_detail img {
  width: 25px;
  height: 25px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;

}

.select_box {
  overflow: hidden;
  margin: 20px 26px;
}

.sizelist {
  display: block;
  width: 100%;
}

li.default {
  border: 1px solid #3C2314;
  background: url('@/assets/selected.png') bottom right no-repeat;
}

.sizelist li {
  display: inline-block;
  border: 1px solid #C8B49B;
  padding: 0 10px;
  min-width: 52px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.add_bug {
  border: 1px solid #3C2314;
  background-color: #3C2314;
  color: #FBF5DD;
}

.buy_now {

  border: 1px solid #E9E9E9;
  color: #3C2314;
  background: #fff;
}

.buy_now:hover {
  color: #dbbc9b;
}
</style>